<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-17 14:47:55
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-26 13:55:44
 * @FilePath: \appGly\pages\index\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="content">
    <u-navbar title="">
      <template #left>
        <view></view>
      </template>
    </u-navbar>
    <view class="ztjcard1 u-flex">
      <view class="item">
        <view class="text1">站点充电总收入(元)</view>
        <view class="text2">{{ StatFrZje.jez / 100 || 0 }}</view>
      </view>
      <view class="item">
        <view class="text1">累计参考电量</view>
        <view class="text2">{{ parseInt(Situation.zdl / 10000) || 0 }}</view>
      </view>
    </view>
    <view class="ztjcard2 u-flex">
      <view class="item" @click="$z.gopage(`/pages/index/wdcdz/wdcdz`)">
        <view class="iconfont iconicon-chongdianzhuang"></view>
        <view class="text1">{{ StatRegion.slsb }}</view>
        <view class="text2">我的总设备</view>
      </view>
      <view class="item" @click="$z.gopage(`/pages/Station/Station`)">
        <view class="iconfont iconquyu"></view>
        <view class="text1">{{ StatRegion.slqu }}</view>
        <view class="text2">我的站点(个)</view>
      </view>
      <view class="item" @click="$z.gopage(`/pages/Cards/Cards`)">
        <view class="iconfont iconqia"></view>
        <view class="text1">{{ StatRegion.slcard }}</view>
        <view class="text2">总卡片数(个)</view>
      </view>
    </view>
    <ztabbar></ztabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        user: {},
        StatFrZje: {},
        Situation: {},
        StatRegion: {},
      };
    },
    created() {
      this.init();
    },
    methods: {
      async init() {
        let user = await this.$store.dispatch("user/getuser");
        this.user = user;
        let StatFrZje = await this.$z.request("/StatFrZje", {
          frid: user.frid,
        });
        this.StatFrZje = StatFrZje[0];
        let Situation = await this.$z.request("/Situation");
        this.Situation = Situation[0];
        let StatRegion = await this.$z.request("/StatRegion");
        this.StatRegion = StatRegion[0];
      },
    },
  };
</script>

<style>
  page {
    background: #efeff4;
  }
</style>
<style lang="scss" scoped>
  .ztjcard1 {
    background: #fff;
    margin: 20rpx;
    border-radius: 8rpx;
    .item {
      width: 0;
      flex: 1;
      padding: 20rpx 30rpx;
      position: relative;
      &:nth-child(1) {
        &::after {
          content: "";
          right: 0;
          top: 40rpx;
          bottom: 40rpx;
          width: 2rpx;
          position: absolute;
          background: #dcdcdc;
        }
      }
      .text1 {
        color: #969696;
        font-size: 32rpx;
        line-height: 60rpx;
      }
      .text2 {
        line-height: 40px;
        color: #2093f5;
        font-size: 30px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: 40px;
      }
    }
  }
  .ztjcard2 {
    background: #fff;
    margin: 20rpx;
    border-radius: 8rpx;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      padding: 20rpx 30rpx;
      position: relative;
      &:nth-child(1) {
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          left: 15px;
          height: 1px;
          content: "";
          transform: scaleY(0.5);
          background: #dcdcdc;
        }
      }
      &:nth-child(2) {
        &::after {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 15px;
          height: 1px;
          content: "";
          transform: scaleY(0.5);
          background: #dcdcdc;
        }
      }
      .iconfont {
        line-height: 30px;
        font-size: 26px;
        color: #2093f5;
        display: block;
      }
      .text1 {
        display: block;
        color: #333333;
        line-height: 40px;
        font-size: 26px;
        height: 40px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .text2 {
        font-size: 14px;
        line-height: 18px;
        color: #969696;
      }
    }
  }
</style>
